<template>
  <div class="swiper">
    <div class="swiper-btn">
      <div class="btn" v-for="(item,index) in swiperList" 
        :index="index" :class="{cativeBtn:index==swiperIndex}" :key="item.id"
        @click='clickItem(index)'
      >{{item.title}}</div>
    </div>
    <swiper :options="swiperOption" ref="slider"> 
      <swiper-slide v-for="(item,index) in swiperList" :index="index" :key="item.id">
        <div class="swiper-content">
          <div class="content-txt">
            <div class="title">{{item.title}}</div>
            <div class="title-min">{{item.titleM1}}</div>
            <div class="title-min">{{item.titleM2}}</div>
            <ul >
              <li v-for="i in item.Lists" :key="i.id">{{i.li}}</li>
            </ul>
          </div>
          <div class="content-img">
            <div class="imgBox">
              <img :src="item.imgUrl" alt="">
            </div>
          </div>
        </div>
      </swiper-slide>
      <div class="swiper-pagination"  slot="pagination"></div>
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
  </div>
</template>
<script>
export default {
  data() {
    return {
      swiperOption: {
        loop: true,
        prevButton: ".swiper-button-prev",
        nextButton: ".swiper-button-next",
        onSlideChangeEnd: swiper => {
          this.swiperIndex = swiper.realIndex;
        }
      },
      swiperIndex: 0,
      swiperList: [
        {
          id: "01",
          imgUrl: "./../../static/image/start@2x.png",
          title: "开屏广告",
          titleM1: "恰到好处的开屏展示时机",
          titleM2: "全屏可点击，品效兼得",
          Lists: [
            {
              id: "1",
              li: "CPC竞价计费"
            },
            {
              id: "3",
              li: "支持Android和ios平台"
            }
          ]
        },
        {
          id: "02",
          imgUrl: "./../../static/image/banner@2x.png",
          title: "Banner广告位",
          titleM1: "普遍常见的广告模式,受众干扰小",
          titleM2: "制作简单，传递信息更多",
          Lists: [
            {
              id: "1",
              li: "CPC竞价计费"
            },
            {
              id: "2",
              li: "多种展现形式"
            },
            {
              id: "3",
              li: "支持Android和ios平台"
            }
          ]
        },
        {
          id: "03",
          imgUrl: "./../../static/image/information@2x.png",
          title: "信息流广告位",
          titleM1: "丰富的内容引导，用户体验好",
          titleM2: "商业和用户体验的完美平衡",
          Lists: [
            {
              id: "1",
              li: "CPC竞价计费"
            },
            {
              id: "2",
              li: "大数据支撑下的千人千面"
            },
            {
              id: "3",
              li: "支持Android和ios平台"
            }
          ]
        },
        {
          id: "04",
          imgUrl: "./../../static/image/Popup@2x.png",
          title: "活动中心",
          titleM1: "与媒体完美融合,活跃用户",
          titleM2: "多种福利，提升用户粘性",
          Lists: [
            {
              id: "1",
              li: "CPC竞价计费"
            },
            {
              id: "2",
              li: "持续性促销"
            },
            {
              id: "3",
              li: "支持Android和ios平台"
            }
          ]
        },
        {
          id: "05",
          imgUrl: "./../../static/image/buoy@2x.png",
          title: "浮标广告位",
          titleM1: "不占用广告位，对用户干扰小",
          titleM2: "形式新颖，容易引起浏览者注意",
          Lists: [
            {
              id: "1",
              li: "CPC竞价计费"
            },
            {
              id: "2",
              li: "支持应用图标"
            },
            {
              id: "3",
              li: "支持Android和ios平台"
            }
          ]
        }
      ]
    };
  },
  methods: {
    clickItem(i) {
      this.$refs.slider.swiper.slideTo(i + 1, 1000, false);
      this.swiperIndex = i;
    }
  }
};
</script>

<style lang='scss' scoped>
.swiper {
  width: 100%;
  height: 100%;
  position: relative;
  top: 10px;
  .btn-prev-nex {
    width: 100%;
    height: 38px;
    background: #666;
    position: absolute;
    top: 0;
    left: 0;
  }
  .swiper-btn {
    width: 100%;
    position: absolute;
    z-index: 999;
    line-height: 50px;
    .btn {
      border: 1px solid #fe5411;
      width: 150px;
      height: 38px;
      line-height: 38px;
      display: inline-block;
      z-index: 999 !important;
      text-align: center;
      padding: 0 20px;
      border-radius: 25px;
      color: #fe5411;
      margin: 0 10px;
      cursor: pointer;
    }
    .cativeBtn {
      color: #fff;
      background: #fe5411;
    }
  }
  .swiper-content {
    position: relative;
    top: 20px;
    width: 800px;
    margin: 2px auto;
    height: 470px;
    overflow: hidden;
    text-align: left;
    .content-txt {
      width: 50%;
      float: left;
      padding: 130px 0 0 100px;

      .title {
        font-size: 32px;
        color: #333;
        font-family: Regular;
        margin-bottom: 18px;
      }
      .title-min {
        color: #666;
        font-size: 18px;
        line-height: 40px;
      }
      ul {
        margin-top: 27px;
        li {
          list-style: disc;
          margin-left: 18px;
          line-height: 30px;
        }
      }
    }
    .content-img {
      width: 50%;
      float: left;
      .imgBox {
        width: 400px;
        img {
          width: 100%;
        }
      }
    }
  }
}
</style>
